// 导入react，和react的组件 从 react
// Componet 组件  createRef 创建引用
import React, { Component ,createRef} from 'react';
// 创建个App 类继承Compnnent组件
class App extends Component {
  // 构造函数，props 是父组件传入的参数
  constructor(props) {
    // 调用父类的构造函数
    super(props);
    // 定义状态state
    this.state = { 
      num:5,
      msg:"我爱react 18",
      isLog:true,
      flag:true,
      list:['react','vue','jquery']
     }
    //  创建一个dom引用
     this.myref = createRef();
  }
  add = (n=1)=>{
    // 更新状态用setState方法更新数据也会更新视图
    this.setState({num:this.state.num+n})
  }
  
  // 渲染内容
  render() { 
    const state = this.state;
    return ( <div>
      <h1>列表渲染</h1>
      {
        // item当前被遍历的元素项 react，vue jquery
        // index 当前元素数组的下标 0   1    2
        state.list.map((item,index)=><h4 key={index}>{item}</h4>)
      }
      <p>{state.list}</p>
      <h1 onClick={()=>this.setState({isLog:!this.state.isLog})}>条件渲染</h1>
      {this.state.isLog?<p>欢迎回来主人</p>:<p>走，先登录</p>}
      {this.state.flag&&<h2>是我看重的人</h2>}
      <h1>dom引用</h1>
      {/* 非受控表单 */}
      <input ref={this.myref}/>
      {/* this.myref.current 代表的input */}
      <button onClick={()=>alert(this.myref.current.value)}>获取</button>
      <h1>表单双向</h1>
      <p>{this.state.msg}</p>
      {/* 受state控制的表单称为受控表单 */}
      {/* 当表单发送变化时候，更新msg值 */}
      {/* e.target 事件对象：表单input */}
      <input value={state.msg} onChange={(e)=>this.setState({msg:e.target.value})}/>
      <h1> state状态</h1>
      {/* 如果传入函数名不带括号，默认调用会传入事件对象 */}
      <button onClick={this.add}>{this.state.num}</button>
      <button onClick={()=>this.add()}>{this.state.num}</button>
      <button onClick={this.add.bind(this,1)}>{this.state.num}</button>
    </div> );
  }
}
 
export default App;

// function  函数组件 视图组件 通常拥有展示 （推荐使用） 没有state
// class     类组件   容器组件 存储数据，处理数据        有state
